<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-tabs</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
    <style>
        [v-cloak] {
            visibility: hidden;
        }
        .tabs {
            font-size: 14px;
            color: #657180;
        }
        .tabs-bar:after {
            content: '';
            display: block;
            width: 100%;
            height: 1px;
            background: #d7dde4;
            margin-top: -1px;
        }
        .tabs-tab {
            display: inline-block;
            padding: 4px 16px;
            margin-right: 6px;
            background: #fff;
            border: 1px solid #d7dde4;
            cursor: pointer;
            position: relative;
        }
        .tabs-tab-active {
            color: #3399ff;
            border-top: 1px solid #3399ff;
            border-bottom: 1px solid #fff;
        }
        .tabs-tab-active:before {
            content: '';
            display: block;
            height: 1px;
            background: #3399ff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
        }
        .tabs-content {
            padding: 8px 0;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <tabs :infos="usefulInfos" @change-show-pane="changeShow" @close-tabs="closePane">
        <pane v-for="(item, index) in items"
              label="item.label" :show="item.isShow" :closable="item.isClosable">
            {{ item.content }}
        </pane>
    </tabs>
</div>

<script src="https://unpkg.com/vue"></script>
<script>
    Vue.component('tabs', {
        template: `
            <div class="tabs">
                <div class="tabs-bar">
                    <span class="tabs-tab"  v-for="(item, index) in infos"
                    :class="{ 'tabs-tab-active': (index === activeTab), 'hidden': isClosed[index]}">
                        <button v-if="item.isClosable" @click="closeTabs(index)"
                        type="button" class="close" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                        <span  @click="handleChange(index)">
                            {{ item.label }}
                        </span>
                    </span>
                </div>
                <div class="tabs-content">
                    <slot></slot>
                </div>
            </div>
        `,
        props: {
            infos: {
                type: Array
            },
        },
        data() {
            return {
                activeTab: 0,
                isClosed: []
            }
        },
        methods: {
            handleChange(index) {
                //也可以这样写
                // this.$parent.items.forEach((item, id) => {
                //     item.isShow = (index === id);
                // });
                this.$emit('change-show-pane', index);
                this.activeTab = index;
            },
            closeTabs(index) {
                this.isClosed[index] = true;
                this.$emit('close-tabs', index);
            }
        },
        mounted() {
            for (let i = 0; i < this.infos.length; i++) {
                this.isClosed.push(false);
            }
        }
    });
    Vue.component('pane', {
        name: 'pane',
        template: `
            <div class="pane" v-show="show" >
                 <slot></slot>
            </div>
        `,
        props: {
            show: {
                type: Boolean,
                default: true
            },
            isClosable: {
                type: Boolean,
                default: false
            }
        }
    });

    let app = new Vue({
        el: '#app',
        data: {
            items: [
                {
                    label: '标签一',
                    content: '标签一中的内容',
                    isShow: true,
                    isClosable: false
                },{
                    label: '标签二',
                    content: '标签二中的内容',
                    isShow: false,
                    isClosable: true
                },{
                    label: '标签三',
                    content: '标签三中的内容',
                    isShow: false,
                    isClosable: true
                }
            ]
        },
        computed: {
            usefulInfos() {
                let arr = [];
                this.items.forEach((item) => {
                    arr.push({
                        label: item.label,
                        isClosable: item.isClosable
                    });
                });
                return arr;
            }
        },
        methods: {
            changeShow(selected) {
                this.items.forEach((item, index) => {
                    item.isShow = (index === selected);
                });
            },
            closePane(selected) {
                this.items[selected].isShow = false;
            }
        }
    })
</script>
</body>
</html>